<template>
  <div class="hl-login-box column">
    <div class="logo">
      <img :src="loginImage" alt="" />
    </div>
    <div class="leftBg">
      <img :src="leftBg" alt="" />
    </div>
    <div class="contents">
      <div class="formItem">
        <div class="titles">数字化管理后台</div>
        <el-form class="login_form" :model="loginForm" ref="ruleFormRef" :rules="rules" :label-position="labelPosition">
          <el-form-item label="" prop="login_name">
            <el-icon class="icon1">
              <SvgIcon size="18px" icon-class="icon-icon_zhanghao" color="#2C68FF"></SvgIcon>
            </el-icon>
            <el-input placeholder="请输入用户名" type="text" prefix-icon="iconfont" v-model="loginForm.login_name"
              @keyup.enter.native="searchFile"></el-input>
          </el-form-item>
          <el-form-item label="" prop="login_passwd">
            <el-icon class='icon1'>
              <SvgIcon size="18px" icon-class="icon-icon_mima" color="#2C68FF"></SvgIcon>
            </el-icon>
            <el-input placeholder="请输入密码" type="password" prefix-icon="iconfont" @keyup.enter.native="searchFile"
              v-model="loginForm.login_passwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-row :span="24" style="width: 100%;">
              <el-col :span="16">
                <el-input style="width: 100%;" placeholder="请输入验证码" @keyup.enter.native="searchFile" type="text"
                  v-model="loginForm.code">
                </el-input>
              </el-col>
              <el-col :span="7" style="padding-left: 5px;">
                <span class="img-form-captch" @click="handleChangeCaptch()">
                  <img :src="imgUrl" />
                </span>
              </el-col>
            </el-row>
          </el-form-item>
          <div class="submit align-items" :class="loading ? 'is_disabled_box' : ''" @click="submitForm">
            <el-icon class="is-loading" v-if="loading">
              <Loading />
            </el-icon>{{ loading ? '正在登录' : '登 录' }}
          </div>
        </el-form>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { FormInstance, FormRules, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { PiniaStore } from '../store'
import Footer from '../components/Common/Footer.vue'
import Md5 from 'js-md5'
import Base64 from '../util/Base64'
// 引入专属的request配置
import { toLogin } from '../components/Api/login'
import { useUserStore } from '../store/user'
// 页面静态图片
import loginImage from '@/assets/images/logo_login.png'
import leftBg from '@/assets/images/bg_2.png'
const route = useRoute()
const useSto = useUserStore()
const router = useRouter()
const store = PiniaStore()
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const labelPosition = ref('top')
const loginForm = reactive<any>({
  login_name: '',
  login_passwd: '',
  code: '',
  rand_num: ''
})
// 验证码图片
const imgUrl = ref('')
const rules = reactive<FormRules>({
  login_name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  login_passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})
// 获取验证码
const getCode = async () => {
  var a = Math.round(Math.random() * 100000000)
  loginForm.rand_num = a
  imgUrl.value = '/DataVisual/admin_pc/JlZW4tc2NyZWVuIiwiaWF0IjoxNzE3/getValidateCode?rand_num=' + a
}
const handleChangeCaptch = async () => {
  loginForm.code = ''
  getCode()
}
// 监听点击键盘登陆事件
const searchFile = async () => {
  submitForm()
}
// 获取通报稿内容
const submitForm = async () => {
  // 手机验证正则表达式
  if (!loginForm.login_name) {
    getCode()
    return ElMessage({
      message: '请输入用户名称',
      type: 'error'
    })
  }
  if (!loginForm.login_passwd) {
    getCode()
    return ElMessage({
      message: '请输入密码',
      type: 'error'
    })
  }
  if (!loginForm.code) {
    getCode()
    return ElMessage({
      message: '请输入验证码',
      type: 'error'
    })
  }
  const base64 = new Base64()
  const result = base64.encode(loginForm.login_name)
  const params = {
    login_name: result,
    login_passwd: base64.encode(loginForm.login_passwd),
    // login_passwd: Md5(loginForm.login_passwd),
    code: loginForm.code,
    rand_num: loginForm.rand_num
  }
  loading.value = true
  const res: any = await toLogin(params)
  if (res.code !== 1) {
    loading.value = false
    getCode()
    loginForm.code = ''
    return ElMessage({
      message: res.message,
      type: 'error'
    })
  }
  // 存储登陆者登录信息
  useSto.SET_INFO(res.data)
  // 存储token到缓存
  useSto.SET_TOKEN(res.data.accessToken)
  window.localStorage.setItem('isLogin', '1')
  loading.value = false
  router.replace('/Material/Index')
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  getCode()
  formEl.resetFields()
}
onMounted(() => {
  getCode()
})
</script>
<style lang="scss" scoped>
.hl-login-box {
  height: 100%;
  display: flex;
  background: url('@/assets/images/bg.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;

  .hl-footer-box {
    position: absolute;
    bottom: 10px;
    background-color: transparent;
  }

  .logo {
    width: 240px;
    height: 109px;
    position: absolute;
    left: 60px;
    top: 20px;

    img {
      width: 100%;
      display: inline-block;
    }
  }

  .leftBg {
    img {
      height: 100%;
      width: auto;
      display: inline-block;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }

  .contents {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 999;


    .formItem {
      width: 537px;
      height: 600px;
      background: var(--el-color-white);
      box-shadow: 0px 4px 30px 1px rgba(197, 197, 197, 0.3);
      border-radius: 10px;
      padding: 50px;
      box-sizing: border-box;
      margin-right: 14%;
    }

    .titles {
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 35px;
      text-align: center;
      padding: 10px;
    }

    .login_form :deep(.el-form-item) {
      margin-bottom: 45px;
      position: relative;

      .el-input--prefix .el-input__inner {
        padding-left: 15px;
      }

      .el-input__wrapper {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        height: 60px;
        line-height: 60px;
        border-radius: 4px;
        background: #f5f7fa;
        padding: 0 15px;
      }

      .el-icon.icon1 {
        display: inline-block;
        position: absolute;
        left: 18px;
        top: 21px;
        z-index: 999;
      }

      .img-form-captch {
        width: 124px;
        height: 49px;
        position: absolute;
        right: 0;

        img {
          width: 124px;
          height: 49px;
          border-radius: 4px;
          top: 0px;
          left: 0px;
        }
      }
    }

    .submit {
      height: 66px;
      line-height: 66px;
      background: #2C68FF;
      box-shadow: 0px 3px 10px 1px #97C4FF;
      border-radius: 4px;
      font-size: 17px;
      color: var(--el-color-white);
      margin-top: 50px;
      cursor: pointer;
      display: flex;
      justify-content: center;

      .is-loading {
        margin-right: 5px;
      }
    }

    // 不可点击登陆按钮
    .is_disabled_box {
      opacity: 0.7;
      pointer-events: none;
      cursor: none;
    }
  }
}

:deep(.el-form-item__error) {
  color: #F73B45;
  margin-top: 15px;
}
</style>
